<template>
  <div class="brand-container w">
    <ul>
      <li><img src="../../assets/images/home/brand_21.png" alt="" /></li>
      <li><img src="../../assets/images/home/brand_03.png" alt="" /></li>
      <li><img src="../../assets/images/home/brand_05.png" alt="" /></li>
      <li><img src="../../assets/images/home/brand_07.png" alt="" /></li>
      <li><img src="../../assets/images/home/brand_09.png" alt="" /></li>
      <li><img src="../../assets/images/home/brand_11.png" alt="" /></li>
      <li><img src="../../assets/images/home/brand_13.png" alt="" /></li>
      <li><img src="../../assets/images/home/brand_15.png" alt="" /></li>
      <li><img src="../../assets/images/home/brand_17.png" alt="" /></li>
      <li><img src="../../assets/images/home/brand_19.png" alt="" /></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Tab'
}
</script>

<style lang="less" scoped>
.brand-container {
  ul {
    display: flex;
    background-color: #f7f7f7;
    padding: 10px 0;
    margin-bottom: 10px;
    li {
      img {
        padding: 0 10px;
        border-right: 1px solid #ccc;
      }
      &:last-child {
        img {
          border: 0;
          padding-right: 0 !important;
        }
      }
    }
  }
}
</style>
